<template>
    <div class="repairReport-content">
        <section class="clear">
            <p class="left h40">维修者签名</p>
        </section>
        <section class="clear">
            <signature v-if='!this.checkedsignature' class="signatureBox upload_file" ref="SignCanvas" :options="optionSignature" v-model="repairsPngData" />
            <div class="btnBox">
                <button @click="canvasClear()">清 空</button>
                <button @click="saveAsImg()">保 存</button>
            </div>
        </section>
        <div>测试的切换分支</div>
        <div>测试的切换分支</div>
        <div>测试的切换分支</div>
        <div>测试的切换分支</div>
        <section class="clear">
            <p class="left h40">车间主任签名</p>
        </section>
        <section class="clear">
            <signature v-if='!this.checkedsignature1' class="signatureBox upload_file" ref="SignCanvas1" :options="optionSignature1" v-model="repairsPngData1" />
            <div class="btnBox">
                <button @click="canvasClear1()">清 空</button>
                <button @click="plantImg()">保 存</button>
            </div>
        </section>
    </div>
</template>

<script>
    import signature from '../components/signature1'
    export default {
        name: "repairReport",
        components: {
            signature
        },
        data() {
            return {
                optionSignature: {
                    isDpr: false, //是否使用dpr兼容高分屏 [Boolean] 可选
                    lastWriteSpeed: 1, //书写速度 [Number] 可选
                    lastWriteWidth: 2, //下笔的宽度 [Number] 可选
                    lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
                    lineJoin: 'bevel', //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
                    canvasWidth: 0, //canvas宽高 [Number] 可选
                    canvasHeight: 200, //高度  [Number] 可选
                    isShowBorder: true, //是否显示边框 [可选]
                    bgColor: '#fff', //背景色 [String] 可选
                    borderWidth: 1, // 网格线宽度  [Number] 可选
                    borderColor: "#e0dbdb", //网格颜色  [String] 可选
                    writeWidth: 4, //基础轨迹宽度  [Number] 可选
                    maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
                    minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
                    writeColor: '#101010', // 轨迹颜色  [String] 可选
                    isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                    imgType: 'png', //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的

                },
                optionSignature1: {
                    isDpr: false, //是否使用dpr兼容高分屏 [Boolean] 可选
                    lastWriteSpeed: 1, //书写速度 [Number] 可选
                    lastWriteWidth: 2, //下笔的宽度 [Number] 可选
                    lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
                    lineJoin: 'bevel', //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
                    canvasWidth: 0, //canvas宽高 [Number] 可选
                    canvasHeight: 200, //高度  [Number] 可选
                    isShowBorder: true, //是否显示边框 [可选]
                    bgColor: '#fff', //背景色 [String] 可选
                    borderWidth: 1, // 网格线宽度  [Number] 可选
                    borderColor: "#e0dbdb", //网格颜色  [String] 可选
                    writeWidth: 4, //基础轨迹宽度  [Number] 可选
                    maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
                    minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
                    writeColor: '#101010', // 轨迹颜色  [String] 可选
                    isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                    imgType: 'png', //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的

                },
                maintainerSignature: '', //维修人员签字
                saasMaintainerSignature: '', //维修人员签字梧桐图片
                operatorSignature: '', //车间主任签名
                saasOperatorSignature: '', //车间主任签名梧桐图片
                piclist: [],
                maxlength: 100,
                inValue: '',
                repairFinishTime: '',
                placeholder: '',
                selectName: null,
                selectPhone: null,
                selectId: null,
                repairmanList: [], //执行人列表
                noExecutorList: '',
                btnColor: false,
                alarmSymbol: '', //实际报警号号
                peopleshow: true, //执行人
                alarmPlace: '',
                fawShow: false,
                adsShow: false,
                problemType: '',
                problemDesc: '',
                problemList: [],
                imgs: [],
                initialIndex: 0,


            }
        },
        created() {
            this.optionSignature.canvasWidth = document.documentElement.clientWidth;
            this.optionSignature1.canvasWidth = document.documentElement.clientWidth;
        },
        destroyed() {
            removeStore('optionslen')
        },
        computed: {},
        mounted() {},
        methods: {
            routeFun() {
                this.$router.go(-1);
            },

            /**
             * 清除画板
             */
            canvasClear() {

                if (this.checkedsignature) {
                    this.checkedsignature = false;
                } else {
                    this.checkedsignature = false;
                    this.$refs.SignCanvas.canvasClear();
                }
            },

            /**
             * 保存图片
             */
            saveAsImg() {
                let _this = this;
                const img = _this.$refs.SignCanvas.saveAsImg();
                if (img == "") {
                    _this.$createToast({
                        type: 'correct',
                        txt: '请填写签名并保存签名',
                    }).show()
                    return false;
                }
                if (this.checkedsignature) {
                    return false;
                }
                let formData = new FormData();
                formData.append('file', img);
                fileUpload(formData).then(res => {
                    if (res.data.code == 200) {
                        // let data = res.data.data;
                        _this.maintainerSignature = res.data.data.fullPath;
                        _this.saasMaintainerSignature = res.data.saasFilePath;
                        _this.$createToast({
                            txt: '操作成功！',
                            type: 'txt'
                        }).show();
                    }
                })
            },

            /**
             * 车间主任清除画板
             */
            canvasClear1() {

                if (this.checkedsignature1) {
                    this.checkedsignature1 = false;
                } else {
                    this.checkedsignature1 = false;
                    this.$refs.SignCanvas1.canvasClear();
                }
            },

            /**
             * 车间主任保存图片
             */
            plantImg() {
                let _this = this;
                const img = _this.$refs.SignCanvas1.saveAsImg();
                if (img == "") {
                    _this.$createToast({
                        type: 'correct',
                        txt: '请填写签名并保存签名',
                    }).show()
                    return false;
                }
                if (_this.checkedsignature1) {
                    return false;
                }
                let formData = new FormData();
                formData.append('file', img);
                fileUpload(formData).then(res => {
                    if (res.data.code == 200) {
                        // let data = res.data.data;
                        _this.operatorSignature = res.data.data.fullPath;
                        _this.saasOperatorSignature = res.data.saasFilePath;
                        _this.$createToast({
                            txt: '操作成功！',
                            type: 'txt'
                        }).show();
                    }
                })
            },

            changeVal(data) {
                data == true ? this.status = "成功" : this.status = "失败"
            }
        },
    }
</script>

<style scoped>
    .signatureBox {
        width: 100%;
        height: calc(100% - 50px);
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        background: #fff;
        display: flex;
        flex-direction: column;
    }

    .canvasBox {
        box-sizing: border-box;
        flex: 1;
    }

    .canvasBox canvas {
        border: 1px solid #7d7d7d;
    }

    .btnBox {
        padding: .625rem;
        text-align: center;
        border: none;
    }

    .btnBox button:nth-of-type(1) {
        background: transparent;
        border-radius: .25rem;
        height: 2.125rem;
        width: 5rem;
        font-size: .875rem;
        color: #71b900;
        border: 1px solid #71b900;
    }

    .btnBox button:nth-of-type(2) {
        background: #71b900;
        color: #fff;
        border-radius: .25rem;
        height: 2.125rem;
        width: 5rem;
        border: none;
        font-size: .875rem;
    }


    .canvasCss {
        height: 100%;
        width: 100%;

    }
</style>